<!--<button (click)="debugpre = !debugpre" style="position:fixed;top:0;left:100px;color:black;z-index: 99999999;">Show debug</button>
<pre *ngIf="debugpre" style="position: absolute;width:70%;top:0;z-index: 9999999;">
    <div style="float:left;width:50%">
        <button (click)="createDummy()">createdummy</button>
    </div>
    <div style="float:left;width:50%">

    </div>
</pre>-->
<div class="main_content float_content white_design">
        <config-tab></config-tab>
    <!--<div class="devicelist_block">-->
        <div class="tab-content">
            <h2 i18n="@@devices">Devices</h2>
            <div class="filter_line" *ngIf="advancedConfig">
                <div class="filter_block">
                    <filter-generator [filterIdTemplate]="'device-list'" [filterID]="'device-list'" [schema]="filterSchema" [model]="filter" (submit)="searchDevices($event)" [filterTreeHeight]="filterHeight"></filter-generator>
                </div>
            </div>
            <div class="filter_line more_function_block">
                <div class="filter single_block">
                    <div class="filter_block">
                        <div class="line">
                            <a href="" (click)="$event.preventDefault();advancedConfig=true" *ngIf="!advancedConfig" class="more"><ng-container i18n="@@extended_search">Extended search</ng-container><i class="glyphicon glyphicon-triangle-bottom"></i></a>
                            <a href="" (click)="$event.preventDefault();advancedConfig=false" *ngIf="advancedConfig" class="more ng-hide"><ng-container i18n="@@extended_search">Extended search</ng-container><i class="glyphicon glyphicon-triangle-top"></i></a>
                            <dcm-drop-down
                                    [placeholder]="moreFunctionConfig.placeholder"
                                    [options]="moreFunctionConfig.options"
                                    [editable]="false"
                                    [(model)]="moreFunctionConfig.model"
                                    [showSearchField]="false"
                                    [multiSelectMode]="false"
                                    (modelChange)="moreFunctionChanged($event)"
                                    [showStar]="false"
                            ></dcm-drop-down>
                        </div>
                    </div>
                    <div class="filter_block">
                        <div class="line">
                            <input autocomplete="off" id="devicefilter" class="devicefilter" [(ngModel)]="devicefilter" i18n-placeholder="@@search_device" placeholder="Search device"/>
                        </div>
                    </div>
                </div>
            </div>
            <table class="j4care-table">
                <thead>
                <tr>
                    <th></th>
                    <th i18n="@@device_name">Device Name</th>
                    <th i18n="@@devices.department_name">Department Name</th>
                    <th i18n="@@device_description">Device Description</th>
                    <th i18n="@@.manufacturer">Manufacturer</th>
                    <th i18n="@@model_name">Model Name</th>
                    <th i18n="@@primary_device_type">Primary device type</th>
                    <th i18n="@@station_name">Station Name</th>
                    <th i18n="@@installed">Installed</th>
                </tr>
                </thead>
                <tbody>
                <tr *ngFor="let device of devices | search:devicefilter | slice:moreDevices.start:moreDevices.limit; let i = index">
                    <td class="buttons_td">
                        <span class="numbers">{{i+1}}.</span>
                        <a [permission]="{id:'action-devicelist-device_configuration',param:'visible'}" class="table_btn" i18n-title="@@edit_device" title="Edit device" href="" (click)="$event.preventDefault();editDevice(device.dicomDeviceName)">
                            <span class="glyphicon glyphicon-pencil"></span>
                        </a>
                        <a [permission]="{id:'action-devicelist-device_configuration',param:'visible'}" class="table_btn" i18n-title="@@title.devices.delete_device" title="Delete device" href="" (click)="$event.preventDefault();deleteDevice(device)">
                            <span class="glyphicon glyphicon-remove"></span>
                        </a>
                        <a [permission]="{id:'action-devicelist-device_configuration',param:'visible'}" class="table_btn" i18n-title="@@title.devices.clone_device" title="Clone device" href="" (click)="$event.preventDefault();cloneDevice(device)">
                            <span class="glyphicon glyphicon-duplicate"></span>
                        </a>
                    </td>
                    <td><div *ngIf="device['dicomDeviceName']" >
                        <a i18n-title="@@title.devices.edit_param" title="Edit {{device['dicomDeviceName']}}" href="" (click)="$event.preventDefault();editDevice(device['dicomDeviceName'])">
                            {{device['dicomDeviceName']}}
                        </a>
                    </div></td>
                    <td><div *ngIf="_.hasIn(device,'dicomInstitutionDepartmentName[0]')" >{{device['dicomInstitutionDepartmentName'][0]}}</div></td>
                    <td><div *ngIf="_.hasIn(device,'dicomDescription')" >{{_.get(device,"dicomDescription")}}</div></td>
                    <td><div *ngIf="_.hasIn(device,'dicomManufacturer')" >{{_.get(device,"dicomManufacturer")}}</div></td>
                    <td><div *ngIf="_.hasIn(device,'dicomManufacturerModelName')" >{{_.get(device,"dicomManufacturerModelName")}}</div></td>
                    <td><div *ngIf="_.hasIn(device,'dicomPrimaryDeviceType[0]')" >{{_.get(device,"dicomPrimaryDeviceType[0]")}}</div></td>
                    <td><div *ngIf="_.hasIn(device,'dicomStationName')" >{{device['dicomStationName']}}</div></td>
                    <td *ngIf="device['dicomInstalled']=== false" i18n="@@false">false</td>
                    <td *ngIf="device['dicomInstalled']!= false" i18n="@@true">true</td>
                </tr>
                </tbody>
            </table>
            <button class="load_more" *ngIf="devices && moreDevices.limit <= devices.length" (click)="loadMoreDevices()"><i *ngIf="moreDevices.loaderActive" class="fa fa-spinner fa-spin fa-3x fa-fw"></i><ng-container i18n="@@more">More</ng-container></button>
        <!--</div>-->
    </div>
</div>